<template>
  <view class="form">
    <view class="form-item">
      <text>商品名称：</text>
      <input v-model="form.name" placeholder="请输入商品名称" />
    </view>

    <view class="form-item">
      <text>数量：</text>
      <input v-model.number="form.count" type="number" placeholder="请输入数量" />
    </view>

    <view class="form-item">
      <text>单价：</text>
      <input v-model.number="form.price" type="number" placeholder="请输入单价" />
    </view>

    <view class="form-item">
      <text>图片链接（选填）：</text>
      <input v-model="form.image" placeholder="例如：https://xxx.jpg" />
    </view>

    <button type="primary" @click="addToCart">添加到购物车</button>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

const form = reactive({
  name: '',
  count: 1,
  price: 0,
  image: ''
})

// 添加到购物车（使用本地缓存）
const addToCart = () => {
  if (!form.name || form.count <= 0 || form.price <= 0) {
    return uni.showToast({ title: '请填写完整信息', icon: 'none' })
  }

  const cart = uni.getStorageSync('cart') || []
  cart.push({
    name: form.name,
    count: form.count,
    total: (form.count * form.price).toFixed(2),
    image: form.image || 'https://img.yzcdn.cn/vant/cat.jpeg'
  })
  uni.setStorageSync('cart', cart)

  uni.showToast({ title: '已添加', icon: 'success' })

  // 清空表单
  form.name = ''
  form.count = 1
  form.price = 0
  form.image = ''
}
</script>

<style scoped>
.form {
  padding: 30rpx;
}
.form-item {
  margin-bottom: 20rpx;
}
input {
  background: #f9f9f9;
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 30rpx;
  margin-top: 10rpx;
}
</style>